<template>
  <div class="zxcwlxFace">
    <div ref="zxcwlx_chart_left2" id="zxcwlx_chart_left2" ></div>
    <br>
    <div class="zxcwlxInfo">
      <div v-for="(itemTit, index) in infoArr" >
        <span :style="{color:getColor(index)}">{{ zxcwlxDataObj[itemTit] }}</span><br>
        <label>{{ zxcwlxLableObj[itemTit] }}</label>
      </div>
    </div>
  </div>
</template>

<script>
let scaleData = []
let color=['#00ffff', '#FFC200', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000'];
let charPie3currentIndex = 0;
let startCharts = null;
export default {
  //在线车类型
  name: "zxcwlxFace",
  props:{
    infoArr: {
      type:Array,
      default:["zxcwlx_pjtcc","zxcwlx_lstcc","zxcwlx_ggtcc"]
    },
  },
  data(){
    return {
      zxcwlxDataObj:{
        zxcwlx_pjtcc: 1,
        zxcwlx_lstcc: 2,
        zxcwlx_ggtcc: 3,
        zxcwlx_txjytcc: 4,
        zxcwlx_qxtcc: 5,
        zxcwlx_cz: 6,
        zxcwlx_xl: 7,
        zxcwlx_px: 8,
        zxcwlx_lwggtcc: 9
      },
      zxcwlxLableObj:{
        zxcwlx_pjtcc: "配建停车场",
        zxcwlx_lstcc: "临时停车场",
        zxcwlx_ggtcc: "公共停车场",
        zxcwlx_txjytcc: "退线经营停车场",
        zxcwlx_qxtcc: "桥下停车场",
        zxcwlx_cz: "垂直",
        zxcwlx_xl: "斜列",
        zxcwlx_px: "平行",
        zxcwlx_lwggtcc: "路外公共车场"
      },
      data: [
        {
          name: '周口',
          value: 55
        },
      ]
    }
  },
  mounted() {
    fetch(`./testData/zxcwlxdata.json`,{
      method: 'get',
      headers: {
        'Content-Type': 'application/json'
      }
    })
        .then(response => response.json())
        .then(data => {
          this.zxcwlxDataObj = data;
          console.log(this.zxcwlxDataObj)
          scaleData =[];
          this.infoArr.forEach(E=>{
            scaleData.push({
              name: this.zxcwlxLableObj[E],
              value: this.zxcwlxDataObj[E]
            })
          })
          this.getEchartLeft2()
        })
  },
  methods: {
    getEchartLeft2() {
      let myChart = echarts.init(this.$refs.zxcwlx_chart_left2);

      let placeHolderStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      };
      let data = [];
      for (let i = 0; i < scaleData.length; i++) {
        data.push({
          value: scaleData[i].value,
          name: scaleData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 20,
              shadowBlur: 10,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: placeHolderStyle
        });
      }

      let option = {
        series: [{
          name: '',
          type: 'pie',
          clockWise: true,
          radius: ['75%', '75%'],
          center: ['50%', '50%'],
          hoverAnimation: true,
          animation: true ,
          animationThreshold: 2000 ,
          animationDuration: 1000 ,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                length: 10,
                length2: 30,
                show: true,
                color: '#00ffff'
              }
            }
          },
          data: data
        }]
      }

      myChart.setOption(option, true);
      // 3、自动高亮展示
      let chartHover = function () {
        let dataLen = option.series[0].data.length
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })
        charPie3currentIndex = (charPie3currentIndex + 1) % dataLen
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })
      }
      startCharts = setInterval(chartHover, 1500)

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    getColor(index){
      return color[index]
    }
  },
  beforeDestroy() {
    startCharts && clearInterval(startCharts)
  }
}
</script>

<style lang="scss" scoped>
.zxcwlxFace{
  padding: 0 15px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  #zxcwlx_chart_left2{
  //background: #ffffff;
    width: 26%;
    height: 85%;
  }
  >.zxcwlxInfo{
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    >div{
      width: 32%;
      text-align: center;
      span{
        font-size: x-large;
        font-weight: 800;
      }
      label{
        color: #FFFFFF;
        font-size: initial;
        font-weight: 600;
        margin-right: 5%;
      }
    }
  }
}

</style>
